<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-06 17:16:13
-->
<template>
  <div class="home">
    <!-- 头部 -->
    <Header></Header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <!-- 第一块：轮播图+新闻列表 -->
     <div class="wrapper"  v-loading="loading">
      <div class="contain1">
        <!-- 轮播图 -->
        <div class="auto">
          <div class="carousel">
             <el-carousel >
           <el-carousel-item v-for="item in carousels" :key="item.id">
             <img class="img" :src="item.url" alt="">
           </el-carousel-item>
          </el-carousel>
          </div>
        </div>
        <!-- /轮播图 -->
        <!-- 新闻列表 -->
        <div class="newList">
          <div class="newTitle">新闻列表</div>
          <ul>
              <li class="article" v-for="a in articleData.list" @click="toArticleHandler(a.id)"  :key="a.id">
                <div class="title">{{a.title}} 
                  <span>{{a.publishTime | fmtDate}}</span>
                </div>
              </li>
            </ul>


          <!-- <ul>
<li><a href="info/1351/6535.htm" target="_blank"  style="font-weight:bold;color:#f00a24;">耕土耘心  砥砺前行</a><span>2020-12-31</span></li>
<li><a href="" target="_blank">学校组织青年教师赴秦皇岛参加教学能力提升培训</a><span>2021-07-31</span></li>
<li><a href="" target="_blank" >学校组织教学管理人员赴复旦大学培训学习</a><span>2021-07-23</span></li>
<li><a href="" target="_blank">学校召开一流专业建设点推进工作会</a><span>2021-07-09</span></li>
<li><a href="" target="_blank" >学校组织召开2021年省级一流课程申报培训会</a><span>2021-07-06</span></li>
<li><a href="" target="_blank" >我校入选首届全国教材建设奖拟奖励名单</a><span>2021-07-02</span></li>
<li><a href="" target="_blank" >学校召开本科专业人才培养方案审核汇报会</a><span>2021-07-01</span></li>
<li><a href="" target="_blank" >教务部召开教学工作会</a><span>2021-06-23</span></li>
<li><a href="" target="_blank" >我校2021年上半年全国大学英语四、六级考试顺利进行</a><span>2021-06-12</span></li>
<li><a href="" target="_blank">教务支部开展“参观红色教育基地，重温入党誓词”主题党日活动</a><span>2021-06-07</span></li>
          </ul> -->
        </div>

      </div>
     </div>
     <!--第二块：icon图标使用 -->
      <div class="wrapper"  v-loading="loading">
       <div class="contain2">
       <ul>
        <li style="margin-right: 12px;"><img src="../assets/image/icon/zonghe.png" style="width:30%" alt=""><a href="https://jwc.sxau.edu.cn/index/jwglxt.htm">综合教务管理系统</a></li>
        <li style="margin-right: 12px;"><img src="../assets/image/icon/dianzi.png" style="width:30%" alt=""><a href="https://jwc.sxau.edu.cn/index/dzcjdyz.htm">电子成绩单验证</a></li>
        <li style="margin-right: 12px;"><img src="../assets/image/icon/shiyan.png" style="width:30%" alt=""><a href="http://syzx.sxau.edu.cn/">实验教学中心</a></li>
        <li style="margin-right: 12px;"><img src="../assets/image/icon/jiaoshi.png" style="width:30%" alt=""><a href="http://jsfzzx.sxau.edu.cn/index.htm">教师教学发展中心</a></li>
        <li style="margin-right: 12px;"><img src="../assets/image/icon/changxiang.png" style="width:30%" alt=""><a href="http://www.changxianggu.com/">畅想谷教材服务</a></li>
        <li style="margin-right: 12px;"><img src="../assets/image/icon/putong.png" style="width:30%" alt=""><a href="https://jwc.sxau.edu.cn/list.jsp?urltype=tree.TreeTempUrl&wbtreeid=1271">普通话专题</a></li>
        <li style="margin-right: 12px;"><img src="../assets/image/icon/zu.png" style="width:30%" alt=""><a href="http://sxau.fanya.chaoxing.com/portal">尔雅大课堂</a></li>
        <li style="margin-right: 12px;"><img src="../assets/image/icon/zhihui.png" style="width:30%" alt=""><a href="https://portals.zhihuishu.com/sxau/shareCourse">智慧树通识课</a></li>
        <li style="margin-right: 12px;"><img src="../assets/image/icon/gaojiao.png" style="width:30%" alt=""><a href="http://sxau.check.cnki.net/">论文查询</a></li>
        <li style="margin-right: 12px;"><img src="../assets/image/icon/gengdu.png" style="width:30%" alt=""><a href="https://jwc.sxau.edu.cn/list.jsp?urltype=tree.TreeTempUrl&wbtreeid=1380">耕读课堂</a></li>
       </ul>
       </div>
      </div>
      <!--/第二块：icon图标使用 -->

      <!-- 第三块：公告列表 -->
      <div class="wrapper" >
        <div class="contain3">
          <div class="articles">
            <div class="articleTitle">
              <div class="border">
                公告通知
              </div>
            </div>
            <!-- 文章列表 -->
            <ul>
              <li class="article" v-for="a in articleData.list" @click="toArticleHandler(a.id)"  :key="a.id">
                <div class="title">{{a.title}} 
                  <span>{{a.publishTime | fmtDate}}</span>
                </div>
              </li>
            </ul>
            </div>
        </div>
      </div>
      <!-- /第三块：公告列表 -->

    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>
</template>
<script>
import {get} from '../utils/request'
import Header from './components/Header'
import Footer from './components/Footer'
export default {
  // 4. 局部组件注册
  components:{
    Header,
    Footer
  },
  // 1. 数据
  data(){
    return {
      carousels:[],
      loading:false,
       category:{},
        param:{
        page:1,
        pageSize:10
      },
       articleData:{
        list:[]
      }
    }
  },
  watch:{
    '$route.query':{
      handler(query){
        this.category = query;
        this.loadArticles();
      },
      deep:true
    }
  },
  // 2. 生命周期钩子函数 - 在vue的生命周期各个阶段会执行的代码
  created(){
    this.loadCarousels();
    this.loadArticles();
  },
  // 3. 方法，一般用来定义方法或者事件处理函数
  methods:{
    // 加载轮播图数据
    loadCarousels(){
      let url = '/index/carousel/findAll'

      get(url).then(resp => {
        this.carousels = resp.data.slice(3);
      })
    },
    // 加载板块数据
     loadArticles(){
      let url = "/index/article/pageQuery"
      this.param.categoryId = this.category.id;
      get(url,this.param).then(resp => {
        this.articleData = resp.data;
      })
    },
     toArticleHandler(id){
      this.$router.push({path:'/article',query:{id}})
    }
  }
 }
</script>
<style lang="scss" scoped>
// 变量
$color_primary:#028b39;

.home {
  overflow-x: hidden;
  //border-color: #efefef;
 background-image: url(../assets/image/img-background.jpg);
 background-size: 100% ;
 //height: 1000px;
  // 内容样式
  .content {
    min-height: 800px;
    .contain1::after {
      content:"";
      display: block;
      clear: both;

    }
    //轮播图+新闻列表
    .contain1{
      padding-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      //轮播图
      .auto{
        width: 500px;
        margin-left: 100px;
        .carousel{
          .img{
            width: 100%;
            height: 100%;
          }
        }
      }
      //新闻列表
      .newList{
        border: 1px solid #bdb8b8;
       //height: 200px;
        width: 500px;
        margin-right: 100px;
        .newTitle{
          padding-left: 3px;
          height: 35px;
    line-height: 35px;
    background: #dddddd;
    margin-bottom: 10px;
    font: 50px;
    font-weight: 900;
    color: #116581;
        }
        ul{
           li:hover {
            color:#cc0000;
            cursor: pointer;
          }
          li{
            font-size: 10px;
            list-style: none;
            margin: 0px;
             padding: 4px 2px;
     border: 0px currentColor;
    border-image: none;
          span{
            float:right;
          }
          }
         
        }

      }
    }
   // ------轮播图+新闻列表
   //----图标内容
   .contain2::after {
      content:"";
      display: block;
      clear: both;

    }
    .contain2{
      width: 100%;
      //padding: 0px;
      ul{
        margin-left: 100px;
        li{
          width: 200px;
         height: 95px;
        background: #e0e0e0  no-repeat;
        text-align: center;
        float: left;
         margin-top: 12px;
       a{
         padding-top: -10px;
       display: block;
        padding-bottom: 10px;
       }
       
        }
          li:hover {
            background-color: #c9e0e9;
          }
      }

    }
   //----图标内容

   //------列表
   .contain3{
     margin-top: 10px;
     margin-left: 100px;
    // border:1px solid black;
     width: 1046px;
       .articles{
         .articleTitle{
        border-bottom:1px solid #d3cfcf;
        .border{
          font-size: 20px;
          width: 90px;
         border-bottom:3px solid #0b6887;
       }
         }
         
        ul > li.article {
          padding: .5em 0;
          border-bottom: 2px dotted #c9c7c7;
          & > div {
            line-height: 1.8em;
          }
          .title {
            cursor: pointer;
            & > span{
              float: right;
            }
          }
        }
      }

   }

   //------列表
  }
 
}
</style>